<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天津商务职业学院</title>
</head>
<link href="../static/plugin/layui/css/layui.css" rel="stylesheet"/>
<script type="text/javascript" src="../static/plugin/layui/layui.js"></script>
<script type="text/javascript" src="../static/js/common.js"></script>
<body bgcolor="#7fffd4">
<div class="demoTable">
    <div class="layui-form" action="">
        <button class="layui-btn" id="add" style="border-radius: 20%;">
            <i class="layui-icon">&#xe654;</i>添加
        </button>
        <div class="layui-inline">
            <input class="layui-input" name="indexname" id="indexname" placeholder="请输入指标名称" autocomplete="off" style="border-radius: 20%;">
        </div>
        <button class="layui-btn" data-type="reload" style="border-radius: 20%;">搜索</button>
    </div>
</div>
<table class="layui-hide" id="test" lay-filter="table" style="border-radius: 20%;"></table>
</body>
<script type="text/html" id="toolBar">
    <a class="layui-icon" style="font-size: 25px; color: #1AA094;" lay-event="edit" style="border-radius: 20%;">&#xe642;</a>
    <a class="layui-icon" style="font-size: 25px; color: #1AA094;" lay-event="del" style="border-radius: 20%;">&#xe640;</a>
</script>

<script>
    layui.use(['form', 'layer', 'table'], function () {
        var table = layui.table
            , form = layui.form, $ = layui.$;

        table.render({
            elem: '#test'  //绑定table id
            , url: 'first/select'  //数据请求路径
            , cellMinWidth: 80
            , cols: [[
                {type: 'numbers'}
                , {field: 'id', title: 'ID'}
                , {field: 'indexname', title: '指标名称'}
                , {field: 'weight', title: '指标权重'}
                , {field: 'parentId', title: '父指标'}
                , {fixed: 'right', title: '操作', width: 180, align: 'center', toolbar: '#toolBar'}//一个工具栏  具体请查看layui官网
            ]]
            , page: true   //开启分页
            , limit: 10   //默认十条数据一页
            , limits: [10, 20, 30, 50]  //数据分页条
            , id: 'testReload'
        });

        active = {
            reload: function () {
                var indexname = $.trim($('#indexname').val());

                table.reload('testReload', {
                    where: {
                        indexname: indexname
                    }
                });
            }
        };
        table.on('tool(table)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        type: 'POST',
                        url: "first/delete",
                        dataType: 'json',
                        contentType: 'application/json',
                        data: JSON.stringify(data),
                        success: function (msg) { // 返回的RequestResult的json对象
                            if (msg == 1) {
                                obj.del();
                                layer.close(index);
                            } else {
                                layer.msg('删除失败！请重试');
                            }
                        },
                    });
                });
                //编辑
            } else if (obj.event === 'edit') {
                var json = eval('(' + JSON.stringify(data) + ')');//String转json
                layerOpen('firstAdd?id=' + json['id'], '编辑指标信息', '670px;', '400px;');
            }
        });
        
        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        $('.demoTable #add').on('click', function(){
            layerOpen('firstAdd','添加指标信息','670px;', '400px;');
        });

    });
</script>
</html>